<template>
  <div class="step-list">
    <div class="step-list-part" v-for="(item, index) in stepList">
      <div class="left-part">
        <div class="img">
          <img :src="activitStep >= index ? item.light_img : item.img" />
        </div>
        <div
          class="text"
          :style="
            activitStep >= index
              ? { color: `#2D2D2D`, fontWeight: 'bold' }
              : { color: `#AEAEAE`, fontWeight: 'normal' }
          "
        >
          {{ item.title }}
        </div>
      </div>
      <div class="right-part" v-show="index !== stepList.length - 1">
        <img
          :src="
            publicUrl(
              activitStep > index 
                ? `/images/right-light.png`
                : `/images/right-step.png`
            )
          "
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { publicUrl } from "@/utils/util";
import { ref,watch } from "vue";

interface Props{
     step:number;
}


const props = withDefaults(defineProps<Props>(),{
   step:1
})
watch(()=>props.step,(newValue)=>{
  activitStep.value = newValue;
});
const activitStep = ref<number>(props.step);  //当前第几步 从0开始算

interface StepList {
  title: string;
  light_img: string;
  img: string;
}

const stepList = ref<Array<StepList>>([
  {
    title: `品类选择`,
    img: publicUrl(`/images/first-step.png`),
    light_img: publicUrl(`/images/first-step-light.png`),
  },
  {
    title: `面料选择`,
    img: publicUrl(`/images/second-step.png`),
    light_img: publicUrl(`/images/second-step-light.png`),
  },
  {
    title: `款式设计`,
    img: publicUrl(`/images/third-step.png`),
    light_img: publicUrl(`/images/third-step-light.png`),
  },
  {
    title: `量体`,
    img: publicUrl(`/images/four-step.png`),
    light_img: publicUrl(`/images/four-step-light.png`),
  },
  {
    title: `保存确认`,
    img: publicUrl(`/images/five-step.png`),
    light_img: publicUrl(`/images/five-step-light.png`),
  },
]);
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
